<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏弹出效果</title>
		<style>
			/*结合实际html结构---通配【合理】
			
			*/
		   *{
			   font:16px "微软雅黑";
			   /*去掉内外边距*/
			   margin: 0;
			   padding: 0;
			   /*无序列表：有样式--去样式*/
			   list-style-type: none;
			   /*无序列表：有样式---去全部样式*/
			   list-style: none;
			   /*无序列表：有样式--
			   去全部样式：list-style-type  去列表项样式
			              list-style-position  去列表项标记标记位置样式
						  list-style-image     去列表项图片标记样式
						  */
		   }
		   /*左栏效果
		   1.左栏空间区域【abside】 253*460  背景颜色
		   2.左栏区域内容【li】  加权  235*50   相对定位---挂靠点【固定位置】
		   3.给每一个区域内容【li】  加鼠标移动上去改背景颜色
		   4.左栏弹出框：   400*500  1像素边框  绝对定位-钩子  微调
		   */
		   aside {
		              width: 265px;
		              height:450 px;
		              background: #ababab; /* 这里背景颜色设置为灰色，你可以根据需求修改 */
					  margin: 20px 50px;
		          }
		  
		          aside ul.sidebar li {
		              width: 235px;
		              height: 50px;
					  /*相对定位--挂靠点*/
		              position: relative;
					  text-align: left;
					  line-height: 50px;
					 padding-left: 30px;
 }
		  
		         aside ul.sidebar li:hover {
		              background: #eee; /* 鼠标悬停时的背景颜色 */
		          }
				  aside ul.sidebar div.out{
					 width: 400px;
					 height: 499px; 
					 border: 1px solid red;
					 position: absolute;
					 left:314px;
					 /*显示与隐藏   javaScript 【JQuery】*/
					 display: none;
				  }
				  /*新增样式*/
				  aside ul.sidebar li span{
					  bor der: 1px solid red;
					  /*第一个组合 加absolute然后调方向*/
					  posi tion: absolute;
					  le ft: 220px;
					  /*第二个组合 右浮，调内边距*/
					  float: right;
					  pad ding-right: 50px;
					  pad ding-top: 10px;
					 /*自己的方法 右浮调外边距*/
					  margin-top: 12px;
					  margin-right:30px;
				  }
		</style>
		<script src="js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- thml结构 结构化标记【语义化标签】 
		 aside元素  针对  左栏、广告、弹出效果......  有利于SEO优化
		 之前版本通过div+id起别名方式【缺点：繁琐、定义起名、冗杂】-->
		 <aside>
			 <ul class="sidebar">
				 <!-- 弹出框 -->
				 <div class="out"></div>
				 
			 	<li>手机 平板 电话卡 <span>></span></li>
			 	<li>电视 盒子<span>></span></li>
			 	<li>路由器 智能硬件<span>></span></li>
			 	<li>移动电源 插线板<span>></span></li>
			 	<li>耳机 音箱<span>></span></li>
			 	<li>电池 存储卡<span>></span></li>
			 	<li>保护套 后盖<span>></span></li>
			 	<li>贴膜 其他配件<span>></span></li>
			 	<li>米兔 服装<span>></span></li>
				<li>箱包 其他周边<span>></span></li>
			 </ul>
		 </aside>
		 <script>
			 //左栏弹出与隐藏    .hover事件源+css函数
			 //选择器：li
			 $("aside ul.sidebar li").hover(function(){
				 /*弹出框默认：隐藏---hover悬停第一件事：显示*/
				 $("aside ul.sidebar div.out").css("display","block");
			 },function(){
				 $("aside ul.sidebar div.out").css("display","none"); 
			 });
		 </script>
	</body>
</html>

<!-- 事件源:hover()    切换效果与css悬停hover一致
                       语法：.hover(function(){},function(){})
-->